<template>
<div class="listViewTop" >
    <img src="http://p2.music.126.net/jzUkyjJo7yMQaczZXQIazg==/109951164244107364.jpg" class="bg">
    <div class="listViewTopNav">
        <div class="back">
            <!-- 点击回到首页 -->
            <svg class="icon" aria-hidden="true" @click="$router.go(-1)">
                <use xlink:href="#icon-zuojiantou"></use>
            </svg>
            <div class="title">
                musiclist
            </div>
        </div>
        <div class="right">
            <div>
                <svg class="icon sousuo" aria-hidden="true" @click="$router.push('/Search')">
                    <use xlink:href="#icon-sousuo"></use>
                </svg>
            </div>
            <div>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-liebiao2"></use>
                </svg>
            </div>
        </div>
    </div>
    <div class="content">
        <div class="content-left">
            <!-- 左边的歌单图片部分 -->
            <img src="http://p2.music.126.net/jzUkyjJo7yMQaczZXQIazg==/109951164244107364.jpg">
            <div class="count">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-bofang_o"></use>
                </svg>
                <span>播放量</span>
            </div>
        </div>
        <div class="content-right">
            <!-- 歌单的具体内容 -->
            <!-- 歌单名字 -->
            <h3>musiclist name</h3>
            <!-- 作者 -->
            <div class="author">
                <img src="http://p2.music.126.net/jzUkyjJo7yMQaczZXQIazg==/109951164244107364.jpg" alt="author avatar" class="header">
                <span>author name</span>
            </div>
            <!-- 歌单介绍 -->
            <div class="description">
                i am a introduce of musiclist i am a introduce of musiclist i am a introduce of musiclist i am a introduce of musiclist i am a introduce of musiclist i am a introduce of musiclist i am a introduce of musiclist
            </div>
        </div>
    </div>
    <div class="iconlist">
        <div class="iconItem">
            <svg class="icon" aria-hidden="true" >
                <use xlink:href="#icon-liaotian"></use>
            </svg>
            <span>评论数</span>
        </div>
        <div class="iconItem">
            <svg class="icon" aria-hidden="true" >
                <use xlink:href="#icon-fenxiang-"></use>
            </svg>
            <span>分享数</span>
        </div>
        <div class="iconItem">
            <svg class="icon" aria-hidden="true" >
                <use xlink:href="#icon-xiazai"></use>
            </svg>
            <span>下载</span>
        </div>
        <div class="iconItem">
            <svg class="icon" aria-hidden="true" >
                <use xlink:href="#icon-duoxuan"></use>
            </svg>
            <span>多选</span>
        </div>
    </div>
</div>
</template>

<script>
import { onBeforeMount ,inject, reactive,toRef} from "vue"
import {getMusicList} from '../api/index'
export default {
    name:'ListViewTop',
    props:['playlist'],
    

    setup(props, context){
        let state=reactive({
            musicList:[]
        });
        // let contextcontext = reactive({})
        // let playlist = reactive(props)
        // console.log(playlist)

        onBeforeMount(()=>{
            let musicList = getMusicList(6).then((res)=>{
                state.musicList=res.data.result;
                console.log(state.musicList[0].picUrl)
            })
            // playlist=inject('playlist')
            // console.log(playlist)
        })    

        return {
            // playlist
        }
    }

    
}
</script>

<style lang="less" scoped>
.listViewTop{
    width: 100%;
    height: 6rem;
    padding: 0 0.12rem;
    .bg {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: auto;
        z-index: -1;
        filter:blur(40px)
    }
    .listViewTopNav{
        align-items: center;
        display: flex;
        justify-content: space-between;
        height: 0.4rem;
    }
    .back,.right{
        display: flex;
        align-items: center;
        color: #fff;
        .icon {
        margin-right: 0.20rem;
        width: 0.6rem;
        height: 0.6rem;
        .sousuo{
            margin-right: 0.20rem;
        }
        // fill:#fff;
        }
    }
    .title{
        font-size: 0.52rem;
        margin-left: 0.36rem;
    }
    .content {
        display: flex;
        justify-content: space-between;
        margin-top:0.2rem;
        .content-left{
            position: relative;
            padding: 0.4rem 0.36rem;
            img {
                width: 3rem;
                height: auto;
                border-radius: 0.1rem;
            }
            .count {
                display: flex;
                position: absolute;
                font-size: 0.24rem;
                color: #ccc;
                align-items: center;
                left:2.1rem;
                top: 0.2rem;
                .icon {
                    width: 0.36rem;
                }
            }
        }
        .content-right{
            width: 3.5rem;
            .author{
                display: flex;
                align-items: center;
                margin: 0.3rem 0;
                img {
                    width: 0.6rem;
                    border-radius: 50%;
                }
                span{
                    color: #ccc;
                    margin-left: 0.2rem;
                }
            }
            .description{
                width: 3rem;
                height: 0.8rem;
                font-size: 0.3rem;
                color: #bbb;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }
            h3{
                color: #fff;
            }
        }
    }
        .iconlist{
        display: flex;
        justify-content: space-around;
        .iconItem{
            display: flex;
            flex-direction: column;
            align-items: center;
            .icon {
                width: 3.6em;
                height: 1rem;
                fill: #fff;
            }
            span {
                font-size: 0.3rem;
            }
        }
    }
}
</style>